<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字滚动</title>
    <style>
        .container {
            width: 400px;
            height: 30px;
            line-height: 30px;
            background-color: lightgrey;
        }

        .left {
            height: 100%;
            float: left;
        }

        .title {
            padding: 0 12px;
        }

        .container span {
            width: 2px;
            height: 16px;
            margin: 7px 0;
            float: left;
            /* 浮动元素会自动转为display：block */
            background-color: black;
        }

        /* .content {
            overflow: hidden;
        } */

        ul {
            height: 100%;
            margin: 0;
            padding-left: 20px;
            /* position: relative;
            top: 0; */

            overflow: hidden scroll;
        }

        ul>li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left title">
            最新公告
        </div>
        <span></span>
        <div class="left content">
            <ul class="list">
                <li>问：大象装进冰箱要几步？</li>
                <li>1. 先打开冰箱</li>
                <li>2. 再把大象装进去</li>
                <li>3. 关上冰箱</li>
            </ul>
        </div>
    </div>

    <script>
        // var ul = document.getElementsByTagName("ul")[0];
        // var num = 0;
        // setInterval(() => {
        //     num -= 30;
        //     if (num < -90) num = 0;
        //     console.log(num);
        //     ul.style.top = num + 'px';
        // }, 2000);
        (function () {
            // 初始化：将第一个元素克隆放到最后一个
            var list = document.querySelector('.list');
            function cloneFirstItem() {
                var firstItem = list.children[0];
                var newItem = firstItem.cloneNode(true);// true:深度克隆
                list.appendChild(newItem);
            }
            cloneFirstItem();
            // 交互：开始自动滚动
            var duration = 2000;
            var curIndex = 0;
            var itemHeight = 30;
            function moveNext() {
                var from = curIndex * itemHeight;
                curIndex++;
                // if (curIndex > 4) curIndex = 0;
                var to = curIndex * itemHeight;
                // list.scrollTop = to;
                // 慢慢滚动
                var totalDuration = 500;//变化的总时间
                var duration = 10;// 变化的间隔时间
                var times = totalDuration / duration;// 变化次数
                var dis = (to - from) / times; //每次变化的高度
                var timer = setInterval(() => {
                    from += dis;
                    if (from >= to) {
                        clearInterval(timer);// 到达了指定位置，定时器停止
                        if (curIndex === list.children.length) {
                            from = 0;
                            curIndex = 0;
                        }
                    }
                    list.scrollTop = from;
                }, duration);
            }
            setInterval(moveNext, duration);
        })()

    </script>
</body>

</html>